<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <fieldset style="margin:20px auto; width:700px;">
        <legend>用户注册：</legend>
        <form action="success.html" method="POST" id="registry">
            <p><label for="">用户姓名：</label><input type="text" class="username"><span></span></p>
            <p><label for="">手机号码：</label><input type="text" class="telphone"><span></span></p>
            <p><label for="">用户密码：</label><input type="password123" class="password"><span></span></p>
            <p><input type="submit" value="提交"></p>
        </form>
    </fieldset>
</body>

</html>
<script>
    //一.表单注册
    //onfocus
    //onblur
    //onsubmit:提交事件  form发起的。
    //oninput:表单的内容发生改变即刻出发。(onkeydown/onkeyup/onchange)

    // var oForm = document.querySelector('#registry'); //form表单。
    // var username = document.querySelector('.username'); //用户名。
    // var telphone = document.querySelector('.telphone'); //手机号码
    // var aSpan = document.querySelectorAll('#registry span'); //获取所有的信息提示元素span
    // username.onkeydown = function() {//弊端是如果不输入，直接选择拖入不会触发。
    //     console.log('事件触发了');
    // };

    // username.onchange = function() { //弊端是必须失去焦点才触发，某些特殊的表单操作不适合。
    //     console.log('事件触发了');
    // };

    // username.oninput = function() { //表单的内容发生改变即刻出发
    //     console.log('事件触发了');
    // };

    var oForm = document.querySelector('#registry'); //form表单。
    var username = document.querySelector('.username'); //用户名。
    var telphone = document.querySelector('.telphone'); //手机号码
    var password = document.querySelector('.password'); //密码
    var aSpan = document.querySelectorAll('#registry span');
    //给每一个表单设置标记
    var userflag = true;
    var telflag = true;
    var passflag = true;

    //2.用户名
    //用户名得到焦点
    username.onfocus = function() {
        aSpan[0].innerHTML = '中英文均可，最长14个英文或7个汉字';
        aSpan[0].style.color = '#333';
    };
    //用户名失去焦点
    username.onblur = function() {
        //判断用户名是否为空。
        if (this.value !== '') {
            //判断用户名的长度
            var strLen = this.value.replace(/[\u4e00-\u9fa5]/g, '**').length;
            if (strLen > 0 && strLen <= 14) {
                var reg = /^[a-zA-Z\u4e00-\u9fa5]+$/;
                if (reg.test(this.value)) {
                    aSpan[0].innerHTML = '√';
                    aSpan[0].style.color = 'green';
                    userflag = true;
                } else {
                    aSpan[0].innerHTML = '用户名格式有误';
                    aSpan[0].style.color = 'red';
                    userflag = false;
                }
            } else {
                aSpan[0].innerHTML = '用户名长度有误';
                aSpan[0].style.color = 'red';
                userflag = false;
            }
        } else {
            aSpan[0].innerHTML = '用户名不能为空';
            aSpan[0].style.color = 'red';
            userflag = false;
        }
    };


    //3.手机号码
    //手机号码得到焦点
    telphone.onfocus = function() {
        aSpan[1].innerHTML = '请输入11位正确的手机号码';
        aSpan[1].style.color = '#333';
    }

    //手机号码失去焦点
    telphone.onblur = function() {
        if (this.value !== '') {
            var reg = /^1[3|5|8]\d{9}$/;
            if (reg.test(this.value)) {
                aSpan[1].innerHTML = '√';
                aSpan[1].style.color = 'green';
                telflag = true;
            } else {
                aSpan[1].innerHTML = '手机号码格式有误';
                aSpan[1].style.color = 'red';
                telflag = false;
            }
        } else {
            aSpan[1].innerHTML = '手机号码不能为空';
            aSpan[1].style.color = 'red';
            telflag = false;
        }
    }

    //4.密码设置
    //1种字符  弱
    //2种字符或者3种字符  中
    //4种字符  强
    password.onfocus = function() {
        aSpan[2].innerHTML = '请输入密码,长度为8-14个字符';
        aSpan[2].style.color = '#333';
    };
    //检测弱中强
    password.oninput = function() {
        if (this.value.length >= 8 && this.value.length <= 14) { //满足长度
            var regnum = /\d+/;
            var reguppercase = /[A-Z]+/;
            var reglowercase = /[a-z]+/;
            var other = /[\W_]+/; //特殊字符%&^$#@!*
            var count = 0; //字符种类的统计结果。
            if (regnum.test(this.value)) { //值存在数字
                count++;
            }
            if (reguppercase.test(this.value)) {
                count++;
            }
            if (reglowercase.test(this.value)) {
                count++;
            }
            if (other.test(this.value)) {
                count++;
            }

            //根据统计的种类输出弱中强
            switch (count) {
                case 1:
                    aSpan[2].innerHTML = '弱';
                    aSpan[2].style.color = 'red';
                    passflag = false;
                    break;
                case 2:
                case 3:
                    aSpan[2].innerHTML = '中';
                    aSpan[2].style.color = 'orange';
                    passflag = true;
                    break;
                case 4:
                    aSpan[2].innerHTML = '强';
                    aSpan[2].style.color = 'green';
                    passflag = true;
                    break;
            }

        } else {
            aSpan[2].innerHTML = '密码长度有误';
            aSpan[2].style.color = 'red';
            passflag = false;
        }
    };
    password.onblur = function() {
        if (this.value !== '') {
            if (passflag) {
                aSpan[2].innerHTML = '√';
                aSpan[2].style.color = 'green';
            }
        } else {
            aSpan[2].innerHTML = '密码不能为空';
            aSpan[2].style.color = 'red';
            passflag = false
        }
    };
    //1.阻止表单的直接跳转。
    oForm.onsubmit = function() {
        if (username.value === '') {
            aSpan[0].innerHTML = '用户名不能为空';
            aSpan[0].style.color = 'red';
            userflag = false;
        }
        if (telphone.value === '') {
            aSpan[1].innerHTML = '手机号码不能为空';
            aSpan[1].style.color = 'red';
            telflag = false;
        }

        if (password.value === '') {
            aSpan[2].innerHTML = '密码不能为空';
            aSpan[2].style.color = 'red';
            passflag = false;
        }
        if (!userflag || !telflag || !passflag) {
            return false;
        }
    };
</script>